<template>
  <view class="login-content">
    <view class="ad">
      <view class="text1">
        新用户登录得
      </view>
      <view class="text2">
        黑胶会员周卡
      </view>
      <view class="text3">
        <uni-icons color="#e4c1b5" size="18" custom-prefix="iconfont" type="icon-vip-fill"></uni-icons>
        <text class="info">付费歌曲免费听</text>
      </view>
    </view>
    <view class="login-wrap">
      <view class="qr-wrap">
        <image class="qrimg" :src="qrimg"></image>
        <view v-if="isShowMask" class="mask" @click="loadqrCode">
          <uni-icons color="#000" size="16" custom-prefix="iconfont" type="icon-shuaxin"></uni-icons>
          <text>二维码已过期，请点击刷新</text>
        </view>
      </view>
      <button @click="login('mobile')" hover-class="btn-click" class="btn">手机号登录</button>
      <button v-if="!isVisitor" @click="login()" hover-class="btn-click" class="btn">游客登录</button>
      <checkbox-group @change="select">
        <label class="article">
          <checkbox style="transform:scale(0.6)" value="cb" :checked="checkedValue" />我已阅读并同意<text
            class="ruleColor">《服务条款》、《隐私协议》</text>
        </label>
      </checkbox-group>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="point">
        <view class="title">
          服务协议和隐私政策等引导
        </view>
        <view class="desc">
          进入下一步前，请阅读并同意网易云音乐的<text class="ruleColor">《服务条款》、《隐私协议》</text>
        </view>
        <view class="choose">
          <button @click="isAgree(false)" class="disagree">不同意</button>
          <button @click="isAgree(true)" class="agree">同意并继续</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
  import {
    computed,
    onMounted,
    onUnmounted,
    ref
  } from "vue";
  import {
    onLoad
  } from "@dcloudio/uni-app";
  import {
    visitLogin,
    getErState,
    getErCode,
    getErKey,
    getLoginState,
    getUserInfo,
    getUserDetail
  } from '@/request/user.js'
  import {
    useStore
  } from 'vuex'
  const store = useStore()
  const checkedValue = ref(true)
  const popup = ref(null)

  const select = (e) => {
    checkedValue.value = e.detail.value.length === 0 ? false : true
  }
  const login = async (mode) => {
    if (!checkedValue.value) {
      popup.value.open()
      return
    }
    if (mode === 'mobile') {
      uni.showToast({
        icon: "none",
        title: "暂无登录接口可用，请尝试游客登录"
      })
    } else {
      try {
        const res = await visitLogin()
        store.commit('user/saveUserInfo', res)
        uni.showToast({
          title: "登录成功",
          icon: 'success'
        })
        uni.switchTab({
          url: redirect.value
        })
        store.commit('user/setRedirect', '')

      } catch (e) {
        //TODO handle the exception
        uni.showToast({
          title: "登录失败",
          icon: 'error'
        })
      }
    }
  }
  const isVisitor = computed(()=>{
    return store.state.user.user
  })
  const redirect = computed(() => {
    return store.state.user.redirect
  })
  let timer
  const qrimg = ref('')
  const isAgree = (flag) => {
    if (flag) {
      checkedValue.value = true
    }
    popup.value.close()
  }
  const qrKey = ref(null)
  const isShowMask = ref(false)
  const loadqrCode = () => {
    // console.log(1); 这段代码需要检查重复
    isShowMask.value = false
    getErKey().then(res => {
      qrKey.value = res.data.unikey
      return getErCode(qrKey.value)
    }).then(res1 => {
      qrimg.value = res1.data.qrimg
      timer = setInterval(async () => {
        if (qrKey.value) {
          const res2 = await getErState(qrKey.value)
          if (res2.code === 800) {
            clearInterval(timer)
            isShowMask.value = true
            qrKey.value = null
          }
          if (res2.code === 803) {
            uni.showLoading({
              title: "正在授权中",
            })
            // 这一步会返回cookie
            clearInterval(timer)
            store.commit('user/setCookie', res2.cookie)
            const res3 = await getLoginState()
            store.commit('user/setId', res3.data.account.id)
            store.commit('user/setProfile', res3.data.profile)
            uni.showToast({
              title: "授权登录成功",
              icon: 'success'
            })
            if (redirect.value) {
              if (redirect.value.includes('my') || redirect.value.includes('songlist')) {
                uni.switchTab({
                  url: redirect.value
                })
              } else {
                uni.redirectTo({
                  url: redirect.value
                })
              }
            } else {
              uni.switchTab({
                url: "/pages/songlist/songlist"
              })
            }
            store.commit('user/setRedirect', '')
          }
        }
      }, 5000)
    })
  }

  onUnmounted(() => {
    if (timer) {
      clearInterval(timer)
    }
  })
  loadqrCode()
</script>

<style lang="less">
  page {
    height: 100%;
  }

  .login-content {

    height: 100%;

    .ad {
      height: 36%;
      background-image: linear-gradient(to bottom, #8d867e, #383026);
      display: flex;
      flex-direction: column;
      align-items: center;

      border-radius: 0% 0% 40% 40%; // 不支持8个值

      // border-radius: 0% 0% 42% 40% / 10% 10% 12% 14% ;
      // justify-content: center;
      .text1 {
        background-image: linear-gradient(to right, #e4c1b5, #fff2e4);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: 44rpx;
        font-weight: bold;
        margin-top: 80rpx;
      }

      .text2 {
        background-image: linear-gradient(to right, #e4c1b5, #fff2e4);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: 50rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
      }

      .text3 {
        display: flex;
        color: #dcbbaf;
        font-size: 28rpx;

        .info {
          margin-left: 10rpx;
        }
      }
    }

    .login-wrap {
      // padding-top: 280rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .qr-wrap {
        margin: 20rpx 0;
        position: relative;

        .mask {
          box-sizing: border-box;
          width: 350rpx;
          height: 350rpx;
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(255, 255, 255, 0.8);
          padding: 60rpx;

          text {
            font-weight: 700;
            margin-left: 15rpx;
          }
        }

        .qrimg {
          width: 350rpx;
          height: 350rpx;

        }
      }


      .btn {
        width: 557.97rpx;
        height: 76rpx;
        line-height: 76rpx;
        background: #e10000;
        border-radius: 43.48rpx;
        font-size: 32.61rpx;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: normal;
        text-align: center;
        color: #fff;
        margin-bottom: 28rpx;
        transform: all 3s;
      }
    }

    .article {
      display: flex;
      font-size: 24rpx;
      align-items: center;
      justify-content: center;
    }
  }

  .btn-click {
    // font-size: 40rpx !important;
    background: #c80000 !important;
  }

  .point {
    background-color: #fff;
    border-radius: 12rpx 12rpx 0 0;
    padding: 40rpx 50rpx 30rpx 50rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 32rpx;
      font-weight: 700;
      margin-bottom: 15rpx;
    }

    .desc {
      font-size: 26rpx;
      color: #474747;
      margin-bottom: 30rpx;
    }

    .choose {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .disagree {
        width: 280rpx;
        border: 1px solid #c80000;
        line-height: 80rpx;
        border-radius: 80rpx;
        font-size: 32rpx;
        color: #c80000;
      }

      .agree {
        width: 280rpx;
        // border: 1px solid #c80000;
        background-color: #c80000;
        line-height: 80rpx;
        border-radius: 80rpx;
        font-size: 32rpx;
        color: #fff;
      }
    }
  }
</style>
